import React from 'react';

// 分类数据
const categories = [
    { id: -1, name: '全部分类', type: 0 },
    { id: 95, name: '通识科普', type: 1 },
    { id: 94, name: '兴趣生活', type: 1 },
    { id: 93, name: '语言学习', type: 1 },
    { id: 88, name: '考研', type: 1 },
    { id: 87, name: '考试·考证', type: 1 },
    { id: 164, name: '影视·创作', type: 1 },
    { id: 89, name: 'IT互联网', type: 1 },
    { id: 92, name: '职业职场', type: 1 },
    { id: 181, name: '个人成长', type: 1 },
];

// 排序数据
const sortOptions = [
    { id: -1, resource_id: 0, src_id: 0, title: '综合排序' },
    { id: 1, resource_id: 0, src_id: 0, title: '销量最高' },
    { id: 2, resource_id: 0, src_id: 0, title: '最新上架' },
    { id: 3, resource_id: 0, src_id: 0, title: '售价最低' },
];

interface FilterProps {
  params: {
    classification_id: number;
    sort_type: number;
    page_size: number;
    page: number;
    word: string;
  };
  setParams: React.Dispatch<React.SetStateAction<{
    classification_id: number;
    sort_type: number;
    page_size: number;
    page: number;
    word: string;
  }>>;
}

const Filter: React.FC<FilterProps> = ({ params, setParams }) => {
  const handleCategoryClick = (id: number) => {
    setParams((prev) => ({ ...prev, classification_id: id, page: 1 }));
  };

  const handleSortClick = (id: number) => {
    setParams((prev) => ({ ...prev, sort_type: id, page: 1 }));
  };

  return (
    <div className="filter-container">
      {/* 分类筛选部分 */}
      <div className="category-filter">
        {categories.map((category) => (
          <div
            key={category.id}
            className={`category-item ${params.classification_id === category.id ? 'active' : ''}`}
            onClick={() => handleCategoryClick(category.id)}
          >
            {category.name}
          </div>
        ))}
      </div>
      {/* 排序筛选部分 */}
      <div className="sort-filter">
        {sortOptions.map((sort) => (
          <div
            key={sort.id}
            className={`sort-item ${params.sort_type === sort.id ? 'active' : ''}`}
            onClick={() => handleSortClick(sort.id)}
          >
            {sort.title}
          </div>
        ))}
      </div>
    </div>
  );
};

export default Filter;